<template>
  <div>
    <!-- 添加或修改机电设备对话框 -->

    <!-- 打印二维码 -->
    <el-dialog title="服务区巡检二维码列表" :visible.sync="open1" width="900px" append-to-body :close-on-click-modal="false" :destroy-on-close="true">
      <el-form inline>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="二维码打印大小：">
              <el-input v-model="qrSize" placeholder="请输入数值单位px" type="number"> <template slot="append">px</template></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="打印字体大小：">
              <el-input v-model="qrFontSize" placeholder="请输入数值单位px" type="number"> <template slot="append">px</template></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- v-if="open1" 防止出现多个 id="qr-list" 元素，打印混乱-->
      <div v-if="open1" id="qr-list1">
        <template v-for="item in patrolTaskContentItemList">
          <div :key="item.id" class="qr-wrap">
            <img style="display:block; margin:0 auto;" :src="qrBaseUrl+'/qrcode/getQrCodeImageSvr/'+item.id">
            <!-- <p style="margin:0;">编码—设备名称</p> -->
            <p style="margin:0;">{{ item.text }}</p>
          </div>
          <div :key="'after'+item.id" class="page-after" style="page-break-after:always;" />
        </template>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button v-hasPermi="['fwq:inspectContent:print']" type="primary" @click="printQr">打印</el-button>
        <el-button @click="open1 = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import print from 'print-js'
const qrBaseUrl = process.env.NODE_ENV === 'production' ? 'http://' + window.location.hostname + ':9209' : 'http://192.168.0.79:9209'
import { getPatrolTaskContentItemListIds } from '@/api/fwq/task/inspectcontent'
export default {
  props: {
    // equId: {
    //   type: [Number, String, Array],
    //   required: true
    // },
    // visible: {
    //   type: [Boolean],
    //   default: false
    // }
  },
  data() {
    return {
      qrBaseUrl,
      open1: false,
      patrolTaskContentItemList: [],
      qrSize: 100,
      qrFontSize: 12
    }
  },
  computed: {
    // open: {
    //   get() {
    //     return this.visible
    //   },
    //   set(v) {
    //     this.uid++
    //     this.$emit('update:visible', v)
    //   }
    // }
  },
  methods: {
    open(contentList, ids) {
      if (contentList && ids) return
      this.patrolTaskContentItemList = []
      if (contentList) {
        this.patrolTaskContentItemList = contentList
      } else {
        ids = [...ids]
        getPatrolTaskContentItemListIds(ids).then(response => {
          this.patrolTaskContentItemList = response.data
        })
      }
      this.open1 = true
    },
    printQr() {
      const qrSize = this.qrSize || 300
      const fontSize = this.qrFontSize || 30
      //  @page {
      //     size: 60mm 40mm;
      //     margin: auto 0mm;
      //   }
      //  .qr-wrap{
      //     display:table-cell;
      //     width:100%;
      //     height: 100%;
      //     overflow: hidden;
      //     vertical-align:middle;
      //     text-align:center;
      //     font-size:${fontSize}px;
      //   }
      // console.log(fontSize)
      const style = `
      @media print {
        @page {
          
        }
        #qr-list {
          margin-top:-10px;
        }
        .qr-wrap {
          // display:table-cell;
          width:100%;
          height:100%;
          margin: 0 auto;
          padding-top:10px;
          overflow: hidden;
          vertical-align:middle;
          text-align:center;
          font-size:${fontSize}px;
        }
        img{ 
          width:${qrSize}px;
          height:${qrSize};
        }
      }`
      print({ printable: 'qr-list1', scanStyles: false, type: 'html', style: style })
    }
  }
}
</script>

<style lang='scss' scoped>
//  二维码 展示样式
#qr-list {
  margin: -10px;
  min-width: 100%;
  overflow: hidden;
}
.qr-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: 200px;
  padding-top: 10px;
  background-color: #e9ecef;
  margin: 10px;
  border-radius: 4px;
  img {
    width:150px; height:150px;
  }
}
.page-after {
  display: inline;
}
// =========
</style>
